<!--
 * @Date: 2024-08-16 23:10:46
 * @Autor: 叶世超
 * @LastEditors: 叶世超 yesc163@163.com
 * @LastEditTime: 2024-08-19 16:59:27
 * @FilePath: \ValueAnalysisH5\src\views\home\index.vue
 * @Description: 描述
 * @version: 版本
-->
<template>
  <div class='home'>
    <div class="h-top">
      <div class="h-title">
        选题价值分析
      </div>
      <div class="h-search">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="选题">
            <el-input v-model="queryParams.title" placeholder="" clearable/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" :icon="Search" @click="onSubmit" circle/>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="h-middle" style="margin-left: 1%;overflow-y: scroll;">
      <el-card style="width: 98%" shadow="hover">
        <el-descriptions title="" column="1">
          <el-descriptions-item label="推荐出版方案">
            <el-radio-group v-model="radio1">
              <el-radio :value="0">畅销书</el-radio>
              <el-radio :value="1">畅销书</el-radio>
              <el-radio :value="2">畅销书</el-radio>
            </el-radio-group>
          </el-descriptions-item>
          <el-descriptions-item label="推荐出版形式">
            <el-radio-group v-model="radio2">
              <el-button type="primary" size="small">图书</el-button>
              <el-button size="small">光盘</el-button>
            </el-radio-group>
          </el-descriptions-item>
          <el-descriptions-item label="智能推荐责任编辑">根据检查</el-descriptions-item>
          <el-descriptions-item label="本社相关图书" v-if="bookList.length>0">
            <div class="demo-image__preview">
              <div style="display: flex;flex-direction: column;align-items: center;"
                   v-for="item in bookList">
                <el-image style="width: 80px; height: 100px;order: -1"
                          :src="JSON.parse(item.fn_cover)[0].url" :zoom-rate="1.2" :max-scale="7"
                          :min-scale="0.2"
                          :preview-src-list="srcList" :initial-index="4" fit="cover"/>
                <span style="order: 1">{{ item.fn_title }}</span>
              </div>
            </div>
          </el-descriptions-item>
          <!--          <el-descriptions-item label="京东平台">-->
          <!--            <div style="height: 200px">-->
          <!--              <el-auto-resizer>-->
          <!--                <template #default="{ height, width }">-->
          <!--                  <el-table-v2 :columns="columns" :data="tableModule.tableData" :width="width" :height="height" />-->
          <!--                </template>-->
          <!--              </el-auto-resizer>-->
          <!--            </div>-->
          <!--          </el-descriptions-item>-->
          <!--          <el-descriptions-item label="当当平台">-->
          <!--            <div style="height: 200px">-->
          <!--              <el-auto-resizer>-->
          <!--                <template #default="{ height, width }">-->
          <!--                  <el-table-v2 :columns="columns" :data="tableModule.tableData" :width="width" :height="height" />-->
          <!--                </template>-->
          <!--              </el-auto-resizer>-->
          <!--            </div>-->
          <!--          </el-descriptions-item>-->
          <!--          <el-descriptions-item label="孔夫子二手网">-->
          <!--            <div style="height: 200px">-->
          <!--              <el-auto-resizer>-->
          <!--                <template #default="{ height, width }">-->
          <!--                  <el-table-v2 :columns="columns" :data="tableModule.tableData" :width="width" :height="height" />-->
          <!--                </template>-->
          <!--              </el-auto-resizer>-->
          <!--            </div>-->
          <!--          </el-descriptions-item>-->
        </el-descriptions>
        <ContentWrap>
          <el-table v-loading="loading" :data="list" :show-header="false">
            <el-table-column align="left" label="封面" prop="imageUrl" width="100">
              <template #default="scope">
                <el-image :src="scope.row.imageUrl" style="max-width: 100px; max-height: 100px">
                  <template #error>
                    <div class="image-slot">
                      <el-icon>
                        <icon-picture/>
                      </el-icon>
                    </div>
                  </template>
                </el-image>
              </template>
            </el-table-column>
            <el-table-column align="left" label="图书" prop="title"/>
            <el-table-column align="left" label="出版单位" prop="publish" width="200"/>
            <el-table-column align="center" label="平台" prop="dataType" width="100"/>
          </el-table>
          <!-- 分页 -->
          <Pagination
            v-model:limit="queryParams.pageSize"
            v-model:page="queryParams.pageNo"
            :total="total"
            @pagination="getList"
          />
        </ContentWrap>
      </el-card>
    </div>
  </div>
</template>
<script lang='tsx' setup>
import {ref, reactive} from 'vue'
import * as ResourcesApi from '@/api/infra/resource/correntResources'
import {ElCheckbox, CheckboxValueType, Column} from 'element-plus'
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from '@element-plus/icons-vue'
import {getCorrectPage} from "@/api/infra/resource/correntResources";

const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  title: undefined,
  createTime: []
})
const loading = ref(false)
const list = ref([])
const total = ref(0)
const radio1 = ref(0)
const radio2 = ref(0)
const formInline = reactive({
  user: '军事简史',
  region: '',
  date: '',
})
const url =
  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
const srcList = [
  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
  'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
  'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
  'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
  'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
  'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
  'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
]
// 表格数据
const tableModule = reactive({
  tableData: [
    {fn_title: '老人与海', fn_author: '海明威', SalesVolume: 4972, aaa: 'aaa'},
    {fn_title: '老人与海', fn_author: '海明威', SalesVolume: 4972, aaa: 'aaa'},
    {fn_title: '老人与海', fn_author: '海明威', SalesVolume: 4972, aaa: 'aaa'},
  ], // 表格数据
  currentPage: 1, // 表格分页：当前页
  pageSize: 10, // 表格分页：每页显示条目个数
  count: 1 // 表格分页：总记录数
})
const onSubmit = () => {
  getList()
  if (queryParams.title) {
    bookQueryParams.keyword = queryParams.title
    getBookList()
  }
}

const columns: Column<object>[] = [
  {
    key: 'fn_title',
    title: '书名',
    dataKey: 'fn_title',
    width: 200,
    align: 'center',
    cellRenderer: ({cellData: fn_title}) => <div>{fn_title}</div>
  },
  {
    key: 'fn_author',
    title: '作者',
    dataKey: 'fn_author',
    width: 200,
    align: 'center',
    cellRenderer: ({cellData: fn_author}) => <div>{fn_author}</div>
  },
  {
    key: 'SalesVolume',
    title: '销量',
    dataKey: 'SalesVolume',
    width: 200,
    align: 'center',
    cellRenderer: ({cellData: SalesVolume}) => <div>{SalesVolume}</div>
  },
  {
    key: 'aaa',
    title: '译话数',
    dataKey: 'aaa',
    width: 200,
    align: 'center',
    cellRenderer: ({cellData: aaa}) => <div>{aaa}</div>
  },
]
const getList = async () => {
  loading.value = true
  try {
    const data = await ResourcesApi.getCorrectPage(queryParams)
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}
const bookList = ref([])
const bookQueryParams = reactive({
  pageNo: 1,
  pageSize: 5,
  status: 10,
  keyword: null,
  author: null,
  press: null,
  createTime: []
})
const getBookList = async () => {
  loading.value = true
  try {
    const data = await ResourcesApi.getBookPage(bookQueryParams)
    bookList.value = data.list
  } finally {
    loading.value = false
  }
}
onMounted(() => {
  getList()
  getBookList()
})
</script>
<style lang='scss' scoped>
@media screen and (min-width: 900px) {
  .h-top {
    height: 150px;
    background-size: 100% 100%;
  }

  ::v-deep(.el-input) {
    width: 500px;
  }

}

::v-deep(.el-form) {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  width: 100%;
}

::v-deep(.el-form-item) {
  margin: 5px !important;
}

.demo-image__error .image-slot {
  font-size: 30px;
}

.demo-image__error .image-slot .el-icon {
  font-size: 30px;
}

.demo-image__error .el-image {
  width: 100%;
  height: 200px;
}

.home {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .h-top {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-image: url(/src/assets/imgs/topic.png);

    .h-title {
      width: 100%;
      height: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-family: HarmonyOS Sans SC;
      font-size: 30px;
      font-weight: bold;
      line-height: 18px;
      letter-spacing: 0px;
      font-feature-settings: "kern" on;
      color: #FFFFFF;
    }

    .h-search {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 50px;

      ::v-deep(.el-form-item__label) {
        font-family: HarmonyOS Sans SC;
        color: #FFFFFF;
      }
    }
  }


  .h-middle {
    //padding: 20px;
    width: 100%;
    flex: 1;

    ::v-deep(.el-descriptions__label) {
      color: #039595;
      font-weight: 900;
    }

    .demo-image__preview {
      display: flex;
      justify-content: flex-start;

      ::v-deep(.el-image) {
        margin-right: 25px;
      }
    }
  }
}
</style>
